<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
  <style>
    .pink{
      color: pink;
    }
    .obj1{
      color: aqua;
    }
    .obj2{
      font-size: 20px;
    }
    .obj3{
      width: 100px;
      height: 100px;
      border: 2px solid black;
    }
  </style>
</head>
<body>
<div id="app">
<!--  1.v-bind 绑定对象-->
  <div :style="obj">test obj</div>
  <div :style="{color:'green',backgroundColor:'#ccc'}">test obj2</div>
<!--  2.v-bind 绑定数组-->
  <div :style="[{color:'pink',width:100,height:100,border:'1px solid red'}]">test arr1</div>
  <div :style="[s1,s2,s3]">test arr2</div>
  <div :style="arr">test arr3</div>
</div>
<script>
  const vm = new Vue({
    el:"#app",
    data(){
      return{
        obj:{
          color:'red',
          fontSize:'20px'
        },
        s1:{color: 'orange'},
        s2:{fontSize: '30px'},
        s3:{backgroundColor:'pink'},
        arr:[{color: 'orange'},{fontSize: '30px'},{backgroundColor:'pink'}]
      }
    }
  })
</script>
</body>
</html>